<template>
	<custom-page title="" borderBottomColor="transparent" backgroundColor="#F9F9FB" :float="true" navBackgroundColor="transparent">
		<template #page>
			<view class="main-content">
				<image class="top-bg" :src="getStorePhoto"></image>
				<view class="store-info-layout">
					<view class="top-info-row">
						<image class="store-img" mode="aspectFill" :src="getStorePhoto"></image>
						<view class="right-info">
							<view class="name-text">{{pollHallDetail.name}}</view>
							<view class="source-row">
								<view class="source-text">5.0</view>
								<image class="evaluate-img" :src="ftpUrl + '/ic_evaluate_heart_select.png'" v-for="(item, index) in 5" :key="index"></image>
								<view class="evaluate-num">0条评价</view>
								<image class="arrow-img" :src="ftpUrl + '/ic_arrow_right.png'"></image>
							</view>
							<view class="time-row">
								<view class="assistant-num-text">助教{{assistantNum}}</view>
								<view class="time-text">营业时间：{{pollHallDetail.businessHoursStart}} - {{pollHallDetail.businessHoursEnd}}</view>
							</view>
						</view>
					</view>
					<view class="divider"></view>
					<view class="address-info-layout">
						<view class="left-view">
							<view class="address-row">
								<view class="address-text">{{pollHallDetail.address}}</view>
								<image class="arrow-img" :src="ftpUrl + '/ic_arrow_right.png'"></image>
							</view>
							<view class="distance-text">距离 {{pollHallDetail.distanceTypeDesc}}</view>
						</view>
						<view class="navigate-col" @click="toMapClick">
							<image :src="ftpUrl + '/ic_store_navigate.png'"></image>
							<text>导航</text>
						</view>
						<view class="navigate-col" @click="callStoreClick">
							<image :src="ftpUrl + '/ic_store_call.png'"></image>
							<text>电话</text>
						</view>
					</view>
				</view>
				<view class="tab-filter-layout" v-if="isShowInfo">
					<view class="tab-row">
						<view class="tab-title-col">
							<view class="tab-title-text">门店助教</view>
							<view class="tab-indate"></view>
						</view>
						<view style="flex: 1;"></view>
						<view class="search-layout" @click="searchClick">
							<image :src="ftpUrl + '/ic_search_black.png'"></image>
							<text>搜索</text>
						</view>
					</view>
					<view class="tab-divider"></view>
					<view class="filter-layout">
						<picker @change="sortFilterChange" :range="sortFilterData.map((e) => e.text)" mode="selector" class="filter-item" v-if="false">
							<view class="filter-item">
								<image class="left-icon" :src="ftpUrl + '/ic_index_sort.png'"></image>
								<view class="filter-title" :class="(practiceStateIndex!=-1)?'.col_01c':'col_585'">{{(practiceStateIndex!=-1)?sortFilterData[practiceStateIndex].text:'综合排序'}}</view>
								<image class="right-img" :src="ftpUrl + '/ic_triangle_bottom_normal.png'"></image>
							</view>
						</picker>
						<picker @change="leveSelectChange" :range="(leaveListData.map((e) => e.grade))" mode="selector" class="filter-item">
							<view class="filter-item">
								<image class="left-icon" :src="ftpUrl + '/ic_index_leave.png'"></image>
								<view class="filter-title" :class="(leaveIndex!=-1)?'.col_01c':'col_585'">{{(leaveIndex!=-1)?leaveListData[leaveIndex].grade:'全部等级'}}</view>
								<image class="right-img" :src="ftpUrl + '/ic_triangle_bottom_normal.png'"></image>
							</view>
						</picker>
						<view class="filter-item" @click="onlySeeOnline">
							<image class="left-icon" :src="ftpUrl + '/ic_online.png'"></image>
							<view class="filter-title" :class="(orderReceivingState)?'.col_01c':'col_585'">只看在线</view>
						</view>
					</view>
				</view>
				<common-list-view ref="storeAssistantList" class="index-page-scroll" :enableLoadMore="true" :enableRefresh="true"
					@listinit="onListInit($event)" :hasNoDataHolder="true" v-if="isShowInfo">
					<template  #content='{datas}'>
						<view class="list-content-grid">
							<assistant-list-item-tow v-for="(item, index) in datas" :itemData="item" @itemClick="assistantClick(item)"></assistant-list-item-tow>
						</view>
					</template>
				</common-list-view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		computed: {
			getStorePhoto(){
				if(this.pollHallDetail && this.pollHallDetail.omittedGraph && this.pollHallDetail.omittedGraph.length>0){
					return this.pollHallDetail.omittedGraph[0]
				}else{
					return ''
				}
			},
			getSortType(){
				if(this.practiceStateIndex != -1){
					return this.sortFilterData[this.practiceStateIndex].code
				}else{
					return ''
				}
			},
			
			getGradeId(){
				if(this.leaveListData && this.leaveListData.length>0 && this.leaveIndex != -1){
					return this.leaveListData[this.leaveIndex].id
				}else{
					return ''
				}
			},
		},
		data() {
			return {
				sortFilterData: [
					{
						text: '综合排序',
						code: '101'
					},
					{
						text: '服务优先',
						code: '102'
					},
					{
						text: '价格优先',
						code: '103'
					},
					{
						text: '距离优先',
						code: '104'
					},
					{
						text: '年龄优先',
						code: '105'
					},
					{
						text: '价格从低到高',
						code: '106'
					},
					{
						text: '价格从高到低',
						code: '107'
					},
				],
				practiceStateIndex: -1,
				leaveListData: [],
				leaveIndex: -1,
				orderReceivingState: '',
				pollId: '',
				pollHallDetail: {},
				assistantNum: 0,
				isShowInfo: true,
			};
		},
		onLoad(val) {
			this.pollId = val.pollId
			//获取系统配置
			this.requestCenter.getSystemConfig().then(res => {
				this.isShowInfo = res.formSupport
				this.getPollHallDetail(this.pollId)
			})
		},
		methods: {
			//门店详情
			getPollHallDetail(pollId){
				this.requestCenter.getPollHallDetail(pollId).then(res => {
					this.pollHallDetail = res
					
					//获取助教等级
					this.getGradeList()
				})
			},
			
			//列表加载
			onListInit(event){
				event.target.loadPageData = ({start, pageSize, showLoading = true}) => {
					let params = {
						current: start,
						pageSize: pageSize,
						name: this.name,
						gradeId: this.getGradeId,
						sortType: this.getSortType,		//综合排序
						orderReceivingState: this.getOrderReceivingState,
						pollId: this.pollId,
					}
					return this.requestCenter.getAssistantPageList(params)
					.then(res => {
						this.assistantNum = res.total
						return Promise.resolve({ 
							curPage: start,
							pageCount: res.pages || 1,
							datas: res.records || []
						})
					})
				}
			},
			
			refreshList(){
				this.$refs.storeAssistantList.triggerLoadData({start: 1, showLoading: true})
			},
			
			
			//联系门店
			callStoreClick(){
				if(this.pollHallDetail.contactNumber){
					uni.makePhoneCall({
						phoneNumber: this.pollHallDetail.contactNumber
					});
				}
			},
			
			//点击导航
			toMapClick(){
				if(this.pollHallDetail.longitude && this.pollHallDetail.latitude){
					let address = this.pollHallDetail.province + this.pollHallDetail.city + this.pollHallDetail.county + this.pollHallDetail.address
					 // #ifdef H5
					let url = `https://apis.map.qq.com/tools/routeplan/eword=${address}&epointx=${this.pollHallDetail.latitude}&epointy=${this.pollHallDetail.longitude}?referer=${'云尚桌球'}&key=${'K6UBZ-D3K3Z-35CXK-ZPV5Z-3BHGK-FVFH5'}`
					window.location.href = url
					// #endif
					// #ifdef MP
					uni.openLocation({
						latitude: parseFloat(this.pollHallDetail.latitude),
						longitude: parseFloat(this.pollHallDetail.longitude),
						name: this.pollHallDetail.name,
						address: address,
					});
					// #endif
					
				}
			},
			
			//助教等级列表
			getGradeList(){
				this.requestCenter.getGradeList().then(res => {
					this.leaveListData = res
				})
			},
			
			//综合筛选
			sortFilterChange(e){
				let index = e.detail.value
				this.practiceStateIndex = index
				this.refreshList()
			},
			
			//助教等级
			leveSelectChange(e){
				let index = e.detail.value
				this.leaveIndex = index
				this.refreshList()
			},
			
			//点击只看在线
			onlySeeOnline(){
				if(this.orderReceivingState == '1'){
					this.orderReceivingState = ''
				}else{
					this.orderReceivingState = '1'
				}
				this.refreshList()
			},
			
			//点击搜索
			searchClick(){
				uni.navigateTo({
					url: `/pages/assistant-list-tow/assistant-list-tow?pollId=${this.pollId}`
				})
			},
			
			//助教点击
			assistantClick(item){
				uni.navigateTo({
					url: `/pages/assistant-detaill/assistant-detaill?userId=${item.userId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.top-bg{
			width: 100%;
			height: 500rpx;
			position: absolute;
			top: 0;
			z-index: 1;
		}
		.store-info-layout{
			width: 100%;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			display: flex;
			flex-direction: column;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: calc(var(--navgation-bar-height) + 10rpx);
			z-index: 2;
			.top-info-row{
				display: flex;
				flex-direction: row;
				align-items: center;
				.store-img{
					width: 164rpx;
					height: 164rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-right: 32rpx;
				}
				.right-info{
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					.name-text{
						font-size: 36rpx;
						color: #101413;
						line-height: 44rpx;
						font-weight: 500;
					}
					.source-row{
						height: 40rpx;
						background: #F9F9F9;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-top: 16rpx;
						.source-text{
							width: 84rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
							background: #FF6A3C;
							border-radius: 20rpx 0rpx 20rpx 20rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							font-weight: 500;
							margin-right: 16rpx;
						}
						.evaluate-img{
							width: 24rpx;
							height: 24rpx;
							margin-right: 2rpx;
						}
						.evaluate-num{
							font-size: 22rpx;
							color: #585F70;
							font-weight: 400;
							margin-left: 16rpx;
						}
						.arrow-img{
							width: 18rpx;
							height: 18rpx;
							margin-left: 8rpx;
							margin-right: 16rpx;
						}
					}
					.time-row{
						display: flex;
						flex-direction: row;
						margin-top: 16rpx;
						.assistant-num-text{
							height: 40rpx;
							line-height: 40rpx;
							background: #ECF7F9;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							padding: 0 16rpx;
							box-sizing: border-box;
							font-size: 24rpx;
							color: #01CBFF;
							margin-right: 16rpx;
						}
						.time-text{
							font-size: 24rpx;
							color: #021624;
						}
						
					}
				}
			}
			.divider{
				width: 100%;
				height: 1rpx;
				background-color: #F9F9F9;
				margin: 30rpx 0;
			}
			.address-info-layout{
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				.left-view{
					flex: 1;
					display: flex;
					flex-direction: column;
					.address-row{
						display: flex;
						flex-direction: row;
						align-items: center;
						.address-text{
							font-size: 26rpx;
							color: #101413;
							line-height: 32rpx;
						}
						.arrow-img{
							width: 32rpx;
							height: 22rpx;
						}
					}
					.distance-text{
						font-size: 24rpx;
						color: #021624;
						margin-top: 8rpx;
						line-height: 32rpx;
					}
				}
				.navigate-col{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-left: 48rpx;
					image{
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 8rpx;
					}
					text{
						font-size: 20rpx;
						color: #585F70;
						line-height: 28rpx;
					}
				}
			}
		}
		.tab-filter-layout{
			display: flex;
			flex-direction: column;
			margin-top: 16rpx;
			
			.tab-row{
				width: 100%;
				height: 88rpx;
				align-items: center;
				display: flex;
				flex-direction: row;
				padding: 0 16rpx 0 32rpx;
				box-sizing: border-box;
				background-color: white;
				.tab-title-col{
					display: flex;
					flex-direction: column;
					align-items: center;
					.tab-title-text{
						font-size: 32rpx;
						color: #021624;
						font-weight: 500;
						line-height: 44rpx;
					}
					.tab-indate{
						width: 48rpx;
						height: 8rpx;
						background: #01CBFF;
						box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(1,203,255,0.16);
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						margin-top: 4rpx;
					}
				}
				.search-layout{
					width: 168rpx;
					height: 64rpx;
					background: #F9F9F9;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					border: 2rpx solid #F5F5F5;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					image{
						width: 32rpx;
						height: 32rpx;
						margin-right: 16rpx;
					}
					text{
						font-size: 28rpx;
						color: #585F70;
					}
				}
			}
			.tab-divider{
				width: 100%;
				height: 2rpx;
				background-color: #F9F9F9;
			}
			.filter-layout{
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 88rpx;
				background-color: white;
				.filter-item{
					flex: 1;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					.left-icon{
						width: 28rpx;
						height: 28rpx;
					}
					.filter-title{
						font-size: 24rpx;
						color: #585F70;
						margin: 0 16rpx;
					}
					.col_585{
						color: #585F70 !important;
					}
					.col_01c{
						color: #01CBFF !important;
					}
					.right-img{
						width: 12rpx;
						height: 8rpx;
					}
				}
				.filter-divider{
					width: 4rpx;
					height: 32rpx;
					background: #F9F9F9;
				}
			}
		}
		.index-page-scroll{
			display: block;
			flex: 1;
			overflow: hidden;
			.list-content-grid{
				width: calc(100% - 32rpx);
				margin: 0 16rpx;
				display: grid;
				grid-template-columns: repeat(2, 49%);
				column-gap: 16rpx;
				row-gap: 16rpx;
				padding-top: 16rpx;
				box-sizing: border-box;
			}
		}
	}
</style>
